<template>
  <div class="customer-add-edit">

    <!--<mt-cell title="客商类型" :value="post.customerType" is-link @click.native="handleSelectType"></mt-cell>-->
    <mt-cell title="客商性质" :value="post.customerNature" is-link @click.native="handleSelectNature"></mt-cell>
    <div class="module-info">
      <mt-field label="客商名称" placeholder="请输入客户名称" v-model="post.bartererName"></mt-field>
      <mt-field label="客商简称" placeholder="请输入客户简称" v-model="post.bartererShortName"></mt-field>
      <mt-cell
        title="结算方式" class="mint-field mint-field-select">
        <select v-model="post.settlementId" class="select-operator">
          <option v-for="item in payList" :value="item.settlementId">{{item.settlement}}</option>
        </select>
      </mt-cell>
      <mt-field label="手机号" placeholder="请输入手机号" v-model="post.telephone"></mt-field>
      <mt-field label="地址" placeholder="请输入地址" v-model="post.address"></mt-field>
    </div>

    <div class="module-other">
      <mt-field label="期初应收款" placeholder="请输入期初应收款" v-model="post.money"></mt-field>
    </div>

    <div class="module-note">
      <span class="note-title">备注信息</span>
      <textarea v-model="post.remarts" class="note-textarea" placeholder="请输入备注信息" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
    </div>

    <div class="button-content">
        <mt-button type="primary" @click="handleSurePost">确定</mt-button>
    </div>

    <mt-popup
      v-model="popupType"
      position="bottom" class="popup-nature">
      <mt-picker :slots="slotsType" class="picker" @change="onTypeChange" :visible-item-count="5" ></mt-picker >
      <div class="button-content">
        <mt-button type="primary" @click="handleSureType">确认</mt-button>
      </div>
    </mt-popup>

    <mt-popup
      v-model="popupNature"
      position="bottom" class="popup-nature">

      <span class="action-add" @click="handleAddNature">新增</span>
      <mt-picker :slots="slotsNature" class="picker" @change="onNatureChange" :visible-item-count="5" ></mt-picker >
      <div class="button-content">
        <mt-button type="primary" @click="handleSure">确认</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {MessageBox,Toast} from 'mint-ui'
export default {
  props:{
    title:String,
  },
  data(){
    return{
      typeNature:[],
      payList:[],
      popupNature:false,
      popupType:false,
      testNature:'',
      testType:'',
      slotsType: [
        {
          flex: 1,
          values: ['客户','供应商'],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      slotsNature: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      post:{
        customerNatureId:'',
        customerNature:'请选择',
        bartererCode: '',
        bartererName: '',
        bartererShortName: '',
        settlementId: '',
        telephone: '',
        address: '',
        remarts: '',
        bartererId:'',
      }
    }
  },
  mounted(){
    this.getDataPay();
    if(this.$route.query.type==1){
      this.getDataSupplier()
      this.post.customerType='供应商'

    }else{
      this.getDataCustomer();
      this.post.customerType='客户'
    }


  },
  methods:{

    /** 获取客户性质 **/
    getDataCustomer() {
      this.slotsNature[0].values=[]
      this.typeNature=[];
      this.post.customerNatureId='';
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','100');
      this.$axios({
        method: 'post',
        url:'gp/bu/customernature!getCustomernatureList.do',
        data:params
      }).then((res)=>{
        console.log(res.data.rows,1111)

      for(var i=0;i<res.data.rows.length;i++){
        this.slotsNature[0].values.push(res.data.rows[i].customerNature)
        var item={
          name:res.data.rows[i].customerNature,
          id:res.data.rows[i].customerNatureId
        }
        this.typeNature.push(item);
      }
      if(this.$route.query.id!=undefined){


        var params = new URLSearchParams();
        params.append('form.customerId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/app/customerApp!customerDetail.do',
          data:params
        }).then((res)=>{
          console.log(res,1111)
        this.post.bartererCode=res.data.object.bartererCode
        this.post.bartererName=res.data.object.bartererName
        this.post.bartererShortName=res.data.object.bartererShortName
        this.post.telephone=res.data.object.telephone
        this.post.address=res.data.object.address
        this.post.remarts=res.data.object.remarts
        this.post.settlementId=res.data.object.settlementId
        this.post.customerNatureId=res.data.object.customerNatureId
        this.post.bartererId=res.data.object.bartererId

        for(var i=0;i<this.typeNature.length;i++){
          if(this.typeNature[i].id==this.post.customerNatureId){
            this.post.customerNature=this.typeNature[i].name
          }
        }
      });
      }

    })
    },
    getDataSupplier() {

      this.slotsNature[0].values=[]
      this.typeNature=[];
      this.post.customerNatureId='';
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','100');
      this.$axios({
        method: 'post',
        url:'gp/bu/suppliernature!getSuppliernatureList.do',
        data:params
      }).then((res)=>{

        console.log(res.data.rows,1111)
        for(var i=0;i<res.data.rows.length;i++){

        this.slotsNature[0].values.push(res.data.rows[i].supplierNature)
          var item={
            name:res.data.rows[i].supplierNature,
            id:res.data.rows[i].supplierNatureId
          }
          this.typeNature.push(item);
      }
    })
    },

    getDataPay() {
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','100');
      this.$axios({
        method: 'post',
        url:'gp/bu/settlement!getSettlementList.do',
        data:params
      }).then((res)=>{
        this.payList=res.data.rows

    })
    },
    handleCancel(){
      this.$emit('customerAddClose')
    },
    handleSelectNature(){
      this.popupNature=true
    },
    onNatureChange(picker, values){
      this.testNature=values[0];

    },
    onTypeChange(picker, values){
      this.testType=values[0]
    },
    handleSelectType(){
      this.popupType=true
    },
    handleSure(){
      this.post.customerNature=this.testNature

      for(var i=0;i<this.typeNature.length;i++){
        if(this.typeNature[i].name==this.post.customerNature){
          this.post.customerNatureId=this.typeNature[i].id
        }
      }
      this.popupNature=false
    },
    handleSureType(){
      this.post.customerType=this.testType
      this.popupType=false;
      this.post.customerNature='请选择';
      if(this.testType=='客户'){
        this.getDataCustomer();
      }else{
        this.getDataSupplier();
      }
    },
    handleAddNature(){
      MessageBox.prompt(' ', '添加客商性质', {inputPlaceholder: '请输入客商性质'}).then(({ value, action }) => {
      if(value=='' || value==null){
        console.log(value,111)
        Toast({
          message: '请填写客商性质',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      console.log(this.testType)
        if(this.post.customerType=='客户'){
          var params = new URLSearchParams();
          params.append('form.customerNature',value);
          this.$axios({
            method: 'post',
            url:'gp/bu/customernature!saveCustomernature.do',
            data:params
          }).then((res)=>{
            console.log(res,1111)
          this.getDataCustomer();
        });
      }else{
          var params = new URLSearchParams();
          params.append('form.supplierNature',value);
          this.$axios({
            method: 'post',
            url:'gp/bu/suppliernature!saveSuppliernature.do',
            data:params
          }).then((res)=>{
            console.log(res,1111)
          this.getDataSupplier();
        });
      }
    })
    },
    handleSurePost(){

      if(this.post.customerNatureId==''){
        Toast({
          message: '请选择客商性质',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.post.bartererName==''){
        Toast({
          message: '请填写客商名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.post.settlementId==''){
        Toast({
          message: '请选择结算方式',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      if(this.post.customerType=='客户'){
        var params = new URLSearchParams();
        params.append('form.customerNatureId',this.post.customerNatureId);
        params.append('form.bartererName',this.post.bartererName);
        params.append('form.bartererShortName',this.post.bartererShortName);
        params.append('form.settlementId',this.post.settlementId);
        params.append('form.telephone',this.post.telephone);
        params.append('form.address',this.post.address);
        params.append('form.remarts',this.post.remarts);
        if(this.$route.query.id){
          params.append('form.customerId',this.$route.query.id);
          params.append('form.bartererCode',this.post.bartererCode);
          params.append('form.bartererId',this.post.bartererId);
        }else{

          params.append('form.bartererCode','NewBill');
        }

        this.$axios({
          method: 'post',
          url:'gp/app/customerApp!saveCustomer.do',
          data:params
        }).then((res)=>{


          if(res.data.result==true){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          setTimeout(()=>{
            this.$router.push({path:'/customer-management'})
        },1500)
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
        }

      })
      }else{

        var params = new URLSearchParams();
        params.append('form.supplierNatureId',this.post.customerNatureId);
        params.append('form.bartererCode','NewBill');
        params.append('form.bartererName',this.post.bartererName);
        params.append('form.settlementId',this.post.settlementId);
        params.append('form.telephone',this.post.telephone);
        params.append('form.address',this.post.address);
        params.append('form.remarts',this.post.remarts);
        this.$axios({
          method: 'post',
          url:'gp/bu/supplier!saveSupplier.do',
          data:params
        }).then((res)=>{


          if(res.data.result==true){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          setTimeout(()=>{
            this.$router.push({path:'/customer-management'})
        },1500)
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
        }

      })
      }

    }
  }
}
</script>
<style>
  .customer-add-edit .module-info{
    margin: 12px 0;
  }
  .customer-add-edit .module-other{
    margin:0 0 12px;
  }
  .customer-add-edit .module-note{
    background: #fff;
    display: flex;
    padding:12px;
  }
  .customer-add-edit .module-note .note-title{
    font-size: 16px;
    width: 105px;
  }
  .customer-add-edit .module-note .note-textarea{
    width: 70%;
    height:60px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    padding:0 10px;
    font-size: 16px;
    text-align: right;
  }
  .customer-add-edit .button-content{
    display: flex;
    padding:24px 36px;
  }
  .customer-add-edit .button-content .mint-button{
    width: 100%;
  }
  .customer-add-edit .button-content .mint-button--primary{
    background:#007EE5;
  }
  .customer-add-edit .module-info .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
  .customer-add-edit .module-other .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }

  .customer-add-edit .popup-nature{
    width: 100%;
  }
  .customer-add-edit .action-add{
    position: absolute;
    top:18px;
    right:12px;
    color: #fff;
    font-size:14px;
    border-radius:3px;
    background:#007EE5;
    padding:6px 12px;
    text-align: center;
    z-index: 1000;
  }
  .customer-add-edit .select-operator{
    width: 100%;
    min-height:32px;
    border:none;
    outline:none;
    font-size: 16px;
    color: #666;
    background: none;
    text-align: right;
    /*direction: rtl;*/
  }
  .mint-field-select .mint-cell-title{
    width:70%;
  }
</style>
